<template>
  <!-- 静态标签区域结束 -->
  <!-- app背景壁纸 -->
  <div :class="['bg']" @click="lostFocus()" @contextmenu.prevent="rightClick()">
    <!-- 遮罩层 -->
    <div class="cover"></div>
    <!-- <img :class="{ focus: isFocus }" src="../assets/BingWallpaper.png" alt="" /> -->
    <img :class="['image', { focus: isFocus }]" :src="imageUrl" :style="fadeIn" alt="" />
  </div>
  <!-- 静态标签区域结束 -->
</template>

<script setup>
import { useStore } from "../store"; // 引入pinia
import { ref, reactive, computed, onMounted, watch } from "vue";
import { addData, getData, updateData, openDB } from "../utils/tools";
const store = useStore();
const isFocus = computed(() => {
  return store.user.focus;
});
// console.log("左击了");
const lostFocus = () => {
  store.lostFocus()
};
// console.log("右击了");
const rightClick = () => {
  store.setData("isSearchShow", false)
  store.setdata("focus", true);
}

const imageUrl = ref(new URL(`../assets/BingWallpaper.png`, import.meta.url).href);


const fadeIn = reactive({
  display: "none",
  opacity: 0,
});


const dbValue = ref(null);
onMounted(async () => {
  const res = await openDB()
  if (res.code == 0) {
    dbValue.value = res.data
    getStorageImg()
  }
  setTimeout(() => {
    fadeIn.opacity = 1;
  }, 250);
  fadeIn.display = "block";
});

function onUploadFile() {
  // 上传壁纸
  // 上传壁纸并永久储存的具体实现逻辑
  // Add code here to handle file upload and permanent storage
  // For example, you can use a file input element to allow the user to select a file for upload, and then use a backend API to store the file permanently.
  // Here's a basic example using FormData and fetch API:
  const input = document.createElement('input');
  input.type = 'file';
  input.multiple = false;
  input.accept = 'image/*';
  input.onchange = async (event) => {
    const file = event.target.files[0];
    fadeIn.display = "none";
    fadeIn.opacity = 0;
    if (indexDBIMG.value) {
      await updateData(dbValue.value, 'wallpaperstore', { key: 'userupload', value: file })
    } else {
      await addData(dbValue.value, 'wallpaperstore', { key: 'userupload', value: file })
    }
    await getStorageImg()

    setTimeout(() => {
      fadeIn.opacity = 1;
    }, 250);
    fadeIn.display = "block";
  };
  input.click();
}




const indexDBIMG = ref(null);
async function getStorageImg() {
  try {
    const res = await getData(dbValue.value, 'wallpaperstore', 'userupload')
    if (res) {
      indexDBIMG.value = res.data.value
      imageUrl.value = URL.createObjectURL(res.data.value)
      return res
    } else {
      return new URL(`../assets/BingWallpaper.png`, import.meta.url).href;
    }
  } catch (error) {
    return new URL(`../assets/BingWallpaper.png`, import.meta.url).href;
  }
}


defineExpose({
  onUploadFile
})

</script>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  min-width: 80%;
  height: 100vh;
  /* background-image: url("../assets/BingWallpaper.png"); */
  background-size: cover;
  overflow: hidden;
}

.bg img {
  position: absolute;
  /* 负二层 */
  z-index: -10;
  top: 0;
  left: 0;
  object-fit: cover;
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
  transition: all .25s;
}

.bg .cover {
  opacity: 0;
  position: absolute;
  /* 负一层 */
  z-index: -2;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  /* 遮罩的阴影 */
  background-image: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 100%),
    radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.5) 166%);
  transition: 1.5s;
}

.dark .bg .cover {
  opacity: 1;
}

.focus {
  transform: scale(1.1);
  filter: blur(8px);
}
</style>
